<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>橙园社区PLUS</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/cards.css">
    <link rel="stylesheet" href="../css/font/iconfont.css"></link>
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header>
    <div class="logo" id="logo">
<!-- 先导入 iconfont 再导入图标类名 --->
    <i class="iconfont icon-group1"></i>
        橙园PLUS
    </div>
    <nav>
        <div class="nav-buttons">
            <a href="../html/login.html" class="nav-btn" id="loginBtn">登录</a>
            <a href="../html/register.html" class="nav-btn" id="registerBtn">注册</a>
        </div>
    </nav>
</header>

    <!-- 主要内容 -->
    <main class="content">
        <div class="text-container">
            <h1>欢迎来到橙园社区PLUS</h1>
            <div class="slogan">
                <p>这是一个多功能社区平台</p>
                <p>兼具物品交易、学习分享、生活交流</p>
                <p>发现更多精彩内容</p>
            </div>
        </div>
    </main>

    <!-- 数据卡片 -->
    <section class="dashboard">
        <div class="card card-activity">
            <div class="card-icon pulse">
                <img src="../svg/layer.svg" alt="社区活跃度图标" class="card-svg">
            </div>
            <h2>社区活跃度</h2>
            <div class="value">98%</div>
        </div>

        <div class="card card-runtime">
            <div class="card-icon rotate">
                <img src="../svg/link.svg" alt="持续运行图标" class="card-svg">
            </div>
            <h2>持续运行</h2>
            <div class="value" id="runtime">0 天 00:00:00</div>
        </div>

        <div class="card card-users">
            <div class="card-icon bounce">
                <img src="../svg/ok-circle.svg" alt="用户总量图标" class="card-svg">
            </div>
            <h2>用户总量</h2>
            <div class="value" data-target="12345">0</div>
        </div>
    </section>

    <script src="../js/index.js"></script>
    <script src="../js/cards.js"></script>
</body>
</html>